﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Content.cshtml";
}

<div>
    <ul class="breadcrumb" style="margin-bottom: 0px;">
        <li>
            <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
            <a href="#">菜单设置</a>
        </li>
    </ul>
</div>



<div class="row-fluid">
    <div class="box span12">
        <div class="box-header well" data-original-title>
            <h3>全部数据</h3>
            <div class="box-icon">
                <a href="#" id="btnCreate" role="button" class="btn" data-toggle="modal"><i class="icon-plus-sign"></i></a>
                <a href="#" id="btnEdit" role="button" class="btn" data-toggle="modal"><i class="icon-edit"></i></a>
                <a href="#" id="btnDelete" role="button" class="btn" data-toggle="modal"><i class="icon-trash"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="box span12">
                    <div id="grid"></div>
                </div>
            </div>
        </div>
    </div>
</div>



<div id="createAndEditModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

<div class='notifications bottom-right container-fluid'>
</div>

@section css{
    <link href="~/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/styles/kendo.default.min.css" rel="stylesheet" />
}

@section Scripts {
    <script src="~/js/kendo.web.min.js"></script>

    <script>
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "GET",
                        url: "@Url.Action("GetAllItems", "Menu")",
                        dataType: "json"
                    }
                },
                schema: {
                    data: "data",
                    total: "total",
                    model: {
                        id: "MenuID",
                        fields: {
                            MenuID: { type: "string" },
                            Name: { type: "string" },
                            Action: { type: "string" },
                            Controller: { type: "string" },
                            ICO: { type: "bool" },
                            CreatedAt: { type: "date" },
                            UpdatedAt: { type: "date" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });


            dataSource.bind("error", dataSource_error);

            function dataSource_error(e) {
                ShowMessage("很遗憾！你的操作发生了错误。", 'error');
            }

            $("#grid").kendoGrid({
                dataSource: dataSource,
                filterable: true,
                sortable: true,
                pageable: true,
                reorderable: true,
                columns: [
                    { field: "MenuID", filterable: false, hidden: true },
                    { field: "Name", title: "菜单名称", width: 120 },
                    { field: "Action", title: "Action", width: 120 },
                    { field: "Controller", title: "Controller", width: 120 },
                    { field: "ICO", title: "图标", width: 180 },
                    { field: "UpdatedAt", title: "更新时间", format: "{0:h:mm:ss yyyy-MM-dd}", width: 150 }],
                selectable: "row"
            });

            $("#btnEdit").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.select();
                var data = grid.dataItem(row);
                if (data != null) {
                    $("#createAndEditModal").load("/Menu/Edit/" + data.MenuID);
                    $('#createAndEditModal').modal('show');
                }
                else {
                    return;
                }
            });

            $("#btnCreate").click(function () {
                $("#createAndEditModal").load("@Url.Action("Create", "Menu")");
                $('#createAndEditModal').modal('show');
            });

            $("#btnDelete").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.select();
                var data = grid.dataItem(row);
                if (data != null) {
                    var result = window.confirm("确定要删除吗？");
                    if (result == true) {
                        $.ajax({
                            url: "/Menu/Delete/" + data.MenuID,
                            type: "GET",
                            success: function (result) {
                                if (result.message == "ok") {
                                    ShowMessage('非常好！你的操作成功。', 'success');
                                    $('#grid').data().kendoGrid.dataSource.read(); // or
                                    $('#grid').data().kendoGrid.refresh();
                                }
                                else {
                                    ShowMessage(result.message, 'error');
                                }
                            }
                        });
                    }
                }
                else {
                    return;
                }
            });


        });
    </script>

    <script>
        function SuccessCreate(result) {

            if (result.data == true) {
                $('#grid').data().kendoGrid.dataSource.read(); // or
                $('#grid').data().kendoGrid.refresh();

                $(".close").click();
                ShowMessage('非常好！你的操作成功。', 'success');
            }
            else {
                ShowMessage('很遗憾！你的操作发生了错误。', 'error');
                return;
            }

        }

        function FailureCreate() {
            ShowMessage('很遗憾！你的操作发生了错误。', 'error');
        }

    </script>
}


